<template>
	<view>
		<!--  #ifndef  MP-WEIXIN -->
		<uni-nav-bar statusBar=true fixed=true color="#fff" backgroundColor="#3476f1" left-icon="back"  title="基金频道">
			<view slot="right" style="display: flex;align-items: center;">
				<image src="../../static/fund/4471.png" mode="" class="icon"></image>
			</view>
		</uni-nav-bar>
		<!--  #endif -->
		<view class="search">
			<input type="text" class="input" value="" placeholder="搜索内容" placeholder-style="text-align:center">
			<!-- <input type="text" class="input" value="" placeholder="搜索内容"/> -->
		</view>
		<view class="catagory">
			<view class="wraper">
				<view class="item">
					<image src="../../static/fund/4471.png" mode="" class="item-image"></image>
					<text>基金详情</text>
				</view>
				<view class="item">
					<image src="../../static/fund/4471.png" mode="" class="item-image"></image>
					<text>基金详情</text>
				</view>
				<view class="item">
					<image src="../../static/fund/4471.png" mode="" class="item-image"></image>
					<text>基金详情</text>
				</view>
				<view class="item">
					<image src="../../static/fund/4471.png" mode="" class="item-image"></image>
					<text>基金详情</text>
				</view>
				<view class="item">
					<image src="../../static/fund/4471.png" mode="" class="item-image"></image>
					<text>基金详情</text>
				</view>
			</view>
		</view>
		<view class="banner">
			<swiper class="swiper" :indicator-dots="true" circular=true :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-i">
					<view class="swiper-item">
						<image src="../../static/fund/fundbanner32.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image class="banner-image" src="../../static/fund/fundbanner32.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="list">
			<view class="title">
				<text class="big-title">稳健优选</text>
				<text class="sml-title">适合新手投资 稳中求进</text>
				<uni-icons type="forward" class="forward" color="gray"></uni-icons>
			</view>
			<view class="nav">
				<view class="nav-item" @tap="activeId=item.id" :class="{active:activeId==item.id}" v-for="item in list1" :key="item.id">{{item.name}}</view>
			</view>
			<swiper style="height: 416rpx;" :current="activeId">
				<swiper-item>
					<view class="swiper-item">
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
					</view>
					
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
						<view class="item">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;margin-top: 20rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 300rpx;">
									<view class="" style="font-size: 35rpx; font-weight: bold;margin-bottom: 10rpx;">股债双利 理财升级</view>
									<text style="color: gray;">汇天富双利券A</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="list">
			<view class="title">
				<text class="big-title">稳健优选</text>
				<text class="sml-title">适合新手投资 稳中求进</text>
				<uni-icons type="forward" class="forward" color="gray"></uni-icons>
			</view>
			<view class="nav">
				<view class="nav-item" @tap="activeId2=item.id" :class="{active:activeId2==item.id}" v-for="item in list2" :key="item.id">{{item.name}}</view>
			</view>
			<template  v-for="i in 3">
				<view class="" v-if="activeId2==i" :key="i">
					
					<view class="" v-for="item in 3" :key="item">
						<view class="item" style="height: 250rpx;">
							<image src="../../static/fund/zoushi.png" mode="" style="width:100rpx;height: 90rpx;"></image>
							<view class="content" style="width: 550rpx;">
								<view class="" style="margin-left: 20rpx;margin-bottom: 20rpx;">
									<view class="" style="width: 550rpx;font-size: 35rpx;font-weight: bold;margin-bottom:10rpx ;">投研副总挂帅 | 聚焦新能源</view>
									<text style="color: gray">中欧先进制造股票C{{item}}</text>
								</view>
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近一年</text>
								</view>
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>近三年</text>
								</view>
								<view class="" style="width: 150rpx;">
									<view class="" style="color:#f85656;font-size: 40rpx;">11.76%</view>
									<text>成立以来</text>
								</view>
							</view>
						</view>
				</view>
			</view>
			</template>
			
		</view>
		<view class="list">
			<view class="title" style="margin: 40rpx 0;">
				<text class="big-title">新发基金</text>
			
				<uni-icons type="forward" class="forward" color="gray"></uni-icons>
			</view>
			<scroll-view scroll-x="true" >
				<view class="scroll-wraper">
					<view class="scroll-item" v-for="item in 4" :key="item">
						<view class="item-title" >华夏科创50ETI</view>
						<text class="text-left">首批科创链接</text>
						<text class="text-right">指数投资专家</text>
						<view class="" style="margin-top: 20rpx;">
							<image src="../../static/fund/head.png" mode="" class="head"></image>
							<text style="font-size: 30rpx;margin-right: 30rpx;margin-left: 10rpx;">杨宇宁</text>
							<text style="font-size: 25rpx;">认购截至时间2021-4-6</text>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
		<view class="list">
			<view class="title" style="margin: 40rpx 0;">
				<text class="big-title">咨询要闻</text>
			
				<uni-icons type="forward" class="forward" color="gray"></uni-icons>
			</view>
			<view class="consult" v-for="i in 4" :key="i">
				<view class="consult-item">
					<view class="item-title" >来了来了！科创50ETF链接基金重磅新发</view>
					<view class="data">
						<text>祥瑞金融咨询</text>
						<text>1888浏览</text>
					</view>
				</view>
				<image src="/static/fund/consult.png" mode="" class="consult-image"></image>
			</view>
		<uni-load-more :status="status" @clickLoadMore="loadMore" :contentText="contentText"></uni-load-more>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				list1:[{id:0,name:"稳中进取"},{id:1,name:"安稳增值"},{id:2,name:"活期理财"}],
				list2:[{id:0,name:"稳中进取"},{id:1,name:"安稳增值"},{id:2,name:"活期理财"}],
				activeId:0,
				activeId2:0,
				status:"more",
				contentText:{contentdown: "加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
			}
		},
		methods: {
			loadMore(e){
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.page{
		// font-size: 0;
	}
.icon{
	width: 48rpx;
	height: 48rpx;
}
.search{
	box-sizing: border-box;
	padding-left: 24rpx;
	padding-right: 24rpx;
	background-color: #3476f1;
	height: 260rpx;
	font-size: 30rpx;
	overflow: hidden;
	border-radius: 0 0 40rpx 40rpx;
	.input{
		background-color: #fff;
		border: none;
		border-radius: 30rpx;
		height: 60rpx;
		margin-top: 20rpx;
		
	}
}
.catagory{
	box-sizing: border-box;
	padding-left: 24rpx;
	padding-right: 24rpx;
	height: 200rpx;
	position: relative;
	.wraper{
		background-color: #fff;
		position: absolute;
		height: 350rpx;
		width: 702rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		top: -150rpx;
		border-radius: 10rpx;
		
		.item{
			
			height:120rpx;
			width:130rpx ;
			margin-left: 36rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: red;
			.item-image{
				width: 60rpx;
				height: 48rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}
.banner{
	box-sizing: border-box;
	padding-left: 24rpx;
	padding-right: 24rpx;
	margin-top: 40rpx;
	.swiper{
		height: 200rpx;
		border-radius: 10rpx !important;
		overflow: hidden;
		.swiper-item{
			height: 200rpx;
			border-radius: 10rpx !important;
		}
		.swiper-i{
			border-radius: 10rpx !important;
		}
		.banner-image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
}
.list{
	padding-left: 24rpx;
	padding-right: 24rpx;
	margin-top: 40rpx;
	.title{
		border-left: 10rpx solid #3476f1;
		height: 40rpx;
		padding: 0 20rpx;
		line-height: 40rpx;
		position: relative;
		.big-title{
			font-size: 32rpx;
			font-weight:bold;
		}
		.sml-title{
			display: inline-block;
			height: 20rpx;
			border-left: 4px solid gray;
			vertical-align: middle;
			line-height: 20rpx;
			margin-left: 10rpx;
			padding-left: 10rpx;
			color:gray;
		}
		.forward{
			vertical-align: middle;
			position: absolute;
			right: 0;
			
		}
		
	}
	.nav{
		display: flex;
		height: 60rpx;
		margin: 10rpx 0;
		.nav-item{
			width: 148rpx;
			margin-right: 50rpx;
			line-height: 60rpx;
			color:gray;
			text-align: center;
		}
		.active{
			background-color: #3476f1;
			color: white;
			font-size: 30rpx;
			font-weight: bold;
			border-radius: 10rpx;
		}
	}
	.item{
		height: 134rpx;
		background-color: white;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		.content{
			display: flex;
			justify-content:space-around;
			flex-wrap: wrap;
		}
	}
	.consult{
		display: flex;
		background-color: white;
		justify-content: space-evenly;
		margin-bottom: 10rpx;
		padding: 20rpx 0;
	}
	
		
		.consult-image{
			width: 208rpx;
			height: 154rpx;
		}
		.item-title{
			width: 450rpx;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
		}
		.data{
			display: flex;
			width: 300rpx;
			justify-content: space-between;
		}
	
}
.scroll-wraper{
	width: 2226rpx;
	display: flex;
	justify-content: space-evenly;
	.scroll-item{
		width: 520rpx;
		height: 224rpx;
		background-color: white;
		padding: 20rpx;
		
		.item-title{
			font-size: 35rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.text-left{
			display: inline-block;
			height: 50rpx;
			background-color: #eaf1fe;
			color: #8fb4f7;
			margin-right: 20rpx;
		}
		.text-right{
			display: inline-block;
			height: 50rpx;
			background-color: #fcf5ec;
			color: #c68e3c;
		}
		.head{
			width: 60rpx;
			height: 60rpx;
			vertical-align: middle;
		}
	}
}
</style>
